<template>
  <p style="color:rgba(121, 121, 121, 0.4)">其他管理/权限管理/角色管理/分配资源</p>
  <el-card>
    <p style="font-size: 20px;font-weight: bolder">分配角色</p>
    <p>当前角色:快递员客服</p>
    <router-link to="/role">
      <p>返回</p>
    </router-link>
    <table border="1">
      <colgroup>
        <col style="width: 300px;" />
        <col style="width: 300px;" />
        <col style="width: 300px;" />
        <col style="width: 700px;" />
        <col />
      </colgroup>
      <thead>
      <tr>
        <th>一级</th>
        <th>二级</th>
        <th>三级</th>
        <th>细则</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>
          <input type="checkbox" v-if="item.level1 !== ''" style="width: 150px;" />
          {{ item.level1 }}
        </td>
        <td>
          <input type="checkbox" v-if="item.level2 !== ''" style="width: 150px;" />
          {{ item.level2 }}
        </td>
        <td>
          <input type="checkbox" v-if="item.level3 !== ''" style="width: 150px;" />
          {{ item.level3 }}
        </td>
        <td>
          <div v-if="item.details !== ''">
            <div>
              <input type="checkbox" style="width: 100px;" /> 增加
              <input type="checkbox" style="width: 100px;" /> 删除
              <input type="checkbox" style="width: 100px;" /> 修改
              <input type="checkbox" style="width: 100px;" /> 查询
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>


  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { level1: '首页', level2: '', level3: '', details: '' },
        { level1: '会员', level2: '', level3: '', details: '' },
        { level1: '柜机', level2: '', level3: '', details: ''},
        { level1: '包裹', level2: '', level3: '', details: '' },
        { level1: '活动', level2: '', level3: '', details: '' },
        { level1: '财务', level2: '', level3: '', details: '' },
        { level1: '其他', level2: '', level3: '', details: '' },
        { level1: '', level2: '系统配置', level3: '', details: '' },
        { level1: '', level2: '广告投放', level3: '', details: ''  },
        { level1: '', level2: '广告公告', level3: '', details: '' },
        { level1: '', level2: '帮助中心', level3: '', details: ''  },
        { level1: '', level2: '意见反馈', level3: '', details: ''  },
        { level1: '', level2: '权限管理', level3: '', details: '' },
        { level1: '', level2: '', level3: '栏目管理', details: true },
        { level1: '', level2: '', level3: '角色管理', details: true },
        { level1: '', level2: '', level3: '子账号管理', details: true },
        { level1: '', level2: '账号设置', level3: '', details: '' }
      ]
    };
  }
};
</script>